<template>
  <el-container class='container-main'>
    <el-header>
      <div class="yuan-height-header">
        <div class="grid-content bg-purple-dark title-top">
          <ul>
            <li class="yuan-height-nav-item">
              <div class='title-log-img'></div>
            </li>
            <li class="yuan-height-nav-item">
              <div class='title-name'>{{ $t("yl.title_title") }}</div>
            </li>
          </ul>
          <div class="right-head-img">
            <img class="head-img"
                 :src="path"
                 :onerror="defaultImg" />
            <div class="yuan-height-nick-name">{{ user.nickname }}</div>
            <div class="yuan-height-out"
                 @click="dropOut()">{{ $t("yl.drop_out") }}</div>
          </div>
        </div>
      </div>
    </el-header>
    <el-divider></el-divider>
    <el-container class='el-container-height el-container-overflow'>
      <Left-Tree class='yuan-height-innerbox'
                 :navigationList='treedefaultData'></Left-Tree>
      <el-container class='el-container-main el-container-overflow'>
        <el-main class='yuan-main'>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data: function () {
    return {
      titleName: '----',
      user: this.Store.getters.userInfo,
      treedefaultData: this.Store.getters.navigations[0].child,
      path: '',
      activeIndex: '1',
      defaultImg: 'this.src="' + require('../../assets/imgs/default-avatar.png') + '"'
    }
  },
  methods: {
    dropOut () {
      let response = this.ACLUserRepo.uploadData(this.RequestApi.exit, {})
      response.then((obj) => {
        this.log(obj, this.RequestApi.ok)
        if (this.StringUtils.verifyTheSame(obj.code, this.RequestApi.ok)) {
          this.Store.commit('delState')
          this.$router.resetRouter()
          this.$router.push({ name: 'login' })
        } else {
          this.MessageUtils.notifyError(this, this.$i18n.tc('yl.exit_error'))
        }
      }).catch((error) => {
        console.log(error)
        this.MessageUtils.notifyError(this, this.$i18n.tc('yl.exit_error'))
        this.$router.push({ name: 'login' })
      })
    }
  },
  created () {

  }
}
</script>

<style>
.el-divider--horizontal {
  margin: 0rem;
}

.grid-content {
  min-height: 60px;
}

.title-log-img {
  width: 3.75rem;
  height: 3.75rem;
  background-image: url(../../assets/imgs/yuan-img.gif);
  background-size: 3.75rem 3.75rem;
}

.yuan-height-nav-item {
  list-style-type: none;
  float: left;
}

.title-name {
  height: 3.75rem;
  line-height: 3.75rem;
  padding-left: 0.9375rem;
}

ul {
  margin: 0rem;
}

.right-head-img {
  float: right;
  height: 3.75rem;
  margin-right: 1.25rem;
  line-height: 3.75rem;
}

.head-img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  border-color: #ffffff;
  background-color: #ffffff;
  margin: 0.625rem;
}

.yuan-height-nick-name,
.head-img,
.my-status,
.yuan-height-out {
  display: inline-block;
}

.yuan-height-nick-name,
.yuan-height-out {
  overflow: hidden;
  line-height: 3.75rem;
}

.yuan-height-nick-name {
  margin-right: 30px;
}

.yuan-height-out {
  width: 50px;
  text-align: center;
  cursor: pointer;
}

.yuan-height-out:hover {
  color: red;
}

.yuan-height-header {
  width: 100%;
}

.el-container-height {
  height: calc(100%-60px);
}

.container-main {
  height: calc(100%);
}

.el-header {
  padding: 0rem;
}

.el-container-main {
  padding: 10px;
}

.el-container-overflow {
  overflow: auto;
}

.yuan-height-innerbox {
  overflow-x: hidden;
  overflow-y: auto;
  color: #000;
  font-size: 0.7rem;
  font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
}

/*滚动条样式*/
.yuan-height-innerbox::-webkit-scrollbar {
  width: 4px;
}

.yuan-height-innerbox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  background: rgba(0, 0, 0, 0.2);
}

.yuan-height-innerbox::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
